<template>
    <div class="doctor-home">
        <div class="back_home">
            <van-sticky>
                <div class="TopView">
                    <p class="left" @click="onClickLeft">
                        <img src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7061.svg"
                            alt="">
                    </p>
                    <p class="font-14-white">
                        医生主页
                    </p>
                    <div class="right">
                        <img src="https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u160.png"
                            alt="">
                        <div class="line"></div>
                        <img src="https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u161.png"
                            alt="">
                    </div>
                </div>
            </van-sticky>
        </div>
        <div class="btnBotton" @click="router.push('talk_doctor')">
            <van-button type="primary" style="width: 100%;">医生服务</van-button>
        </div>


        <DoctorHomeImg :message="personObj" :getDoctorLs="getDoctorLs" />

        <el-backtop :right="50" :bottom="100" />
    </div>
</template>

<script setup>
import DoctorHomeImg from '@/components/zzh/doctorLs/DoctorHomeImg.vue'
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter} from 'vue-router';
import axios from 'axios';

const onClickLeft = () => history.back();
let route = useRoute()
let id = ref(route.query.id)
let personObj = ref()
let doctores = ref(0)
const router = useRouter()

onMounted(() => {
    getDoctorLs()
})

const getDoctorLs = async () => {
    let { data: { person } } = await axios.get('http://127.0.0.1:3000/Person', {
        params: { id: id.value }
    })
    console.log(person)
    doctores.value = 1
    personObj.value = person[0]
}



</script>
<style lang="scss" scoped>
.doctor-home {
    padding-bottom: 75px;
    // background-color: #f2f2f2;

    .back_home {
        height: 170px;
        background-image: url('https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7049.svg');
        background-position-y: -30px;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #f2f2f2;
    }

    .TopView {
        height: 60px;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: transparent;
        background-image: url('https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7049.svg');
        background-position-y: -30px;
        background-size: cover;
        background-repeat: no-repeat;

        .left {
            font-size: 16px;
            font-weight: 700;
            line-height: 50px;
            font-family: 'Arial, Helvetica, sans-serif';
        }

        .line {
            width: 1px;
            height: 16px;
            line-height: 16px;
            background: #d8d8d8;
        }

        .right {
            width: 87px;
            height: 32px;
            background: #f2f2f2;
            line-height: 32px;
            border-radius: 50px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
        }
    }
}

.btnBotton {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #ffffff;
}
</style>